<template>
  <div class="box">
    <div class="add-book">
      <!-- <darkInput placeholder="输入书签名称" style="width: 240px; margin-right: 20px" /> -->
      <div class="add-icon" @click="flag = true">添加书签</div>
    </div>
    <div class="book-list">
      <div
        v-for="(item, index) in bookmarks"
        :key="index"
        :class="['book-item', activeIndex === index ? 'active' : '']"
        @click="loadMark(item, index)"
      >
        <span class="book-text">{{ item.bookmarkName }}</span>
        <el-popconfirm
          width="220"
          :title="'确定删除' + item.bookmarkName + '吗'"
          @cancel="onCancel"
          @confirm="delBookMark(item.id)"
        >
          <template #reference>
            <span class="clear-icon" @click.native.stop></span>
          </template>
          <template #actions="{ confirm, cancel }">
            <el-button size="small" @click="cancel">取消</el-button>
            <el-button type="danger" size="small" @click="confirm"> 删除 </el-button>
          </template>
        </el-popconfirm>
      </div>
    </div>

    <screenDialog
      v-if="flag"
      :dialog-visible="flag"
      @close="flag = false"
      size="small"
      title="添加书签"
    >
      <div class="book-box" style="margin-top: 20px">
        <darkInput v-model="inpValue" placeholder="输入书签名称" title="名称" />
        <br />
        <el-button
          align="right"
          type="primary"
          style="margin-top: 10px; float: right"
          @click="addBookMark"
          >添加书签</el-button
        >
      </div>
    </screenDialog>
  </div>
</template>
  
  <script setup>
import { ref } from 'vue'
import * as bookmark from '../../../../../api/bookmark'
import { useMapStoreStore } from '../../../../../stores/index'
import { loadWmsMap, delWmsMap } from '../../../../../api/gis3d/maputils.js'

const store = useMapStoreStore()
var bookmarks = ref([])
const flag = ref(false)
const inpValue = ref('')

function initData() {
  var query = {
    viewType: '3d'
  }
  bookmark.getBookMarkList(query).then((res) => {
    bookmarks.value = res
  })
}
function addBookMark() {
  var camera = viewer.camera
  var position = camera.positionWC.clone() // 世界坐标系下的位置
  var orientation = {
    heading: camera.heading,
    pitch: camera.pitch,
    roll: camera.roll
  }
  var viewState = {
    position: position,
    orientation: orientation
  }

  var layerCode = store.tree.join(',')
  var query = {
    viewType: '3d',
    bookmarkName: inpValue.value,
    bookmarkExtend: JSON.stringify(viewState),
    layerCode: layerCode
  }
  bookmark.addBookMark(query).then((res) => {
    flag.value = false
    initData()
  })
}

const activeIndex = ref(-1)
let oldLaycode = []
const loadMark = (e, index) => {
  if (activeIndex.value === index) {
    activeIndex.value = -1
    store.delLayer(oldLaycode)
    return
  }

  var tmpExtentd = JSON.parse(e.bookmarkExtend)
  viewer.camera.flyTo({
    destination: tmpExtentd.position,
    orientation: {
      heading: tmpExtentd.orientation.heading,
      pitch: tmpExtentd.orientation.pitch,
      roll: tmpExtentd.orientation.roll
    }
  })

  activeIndex.value = index
  var layerCode = e.layerCode
  if (oldLaycode) {
    store.delLayer(oldLaycode)
  }
  var arr = layerCode.split(',')
  store.addLayer(arr)
  oldLaycode = arr
}

const delBookMark = (id) => {
  bookmark.delBookMarkById({ id }).then((e) => {
    initData()
  })
}
initData()
</script>
  
  <style lang="scss" scoped>
.box {
  height: 100%;
  min-height: 500px;
  max-height: 550px;
  box-sizing: border-box;
  overflow-y: auto;
  font-size: 18px;
  color: #b9eeff;
  .shower-screen {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #2c2f337a;
    height: 100vh;
    width: 100vw;
    z-index: 2000;
  }
  .book-box {
    width: 100%;
    height: 100%;
  }
  .add-book {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-top: 10px;
    .add-icon {
      width: 100px;
      height: 40px;
      background-color: rgb(0, 25, 51);
      border: 1px solid #0e9cff;
      border-radius: 8px;
      background-image: url(/static/icon/add.png);
      background-position: 20px center;
      background-repeat: no-repeat;
      padding: 0 0px 0 40px;
      text-align: center;
      line-height: 40px;
      color: #01c2ff;
    }
    .add-icon:hover {
      box-shadow: 0 0 10px #1678e1;
    }
  }
  .book-list {
    height: calc(100% - 60px);
    margin-top: 20px;
    overflow: auto;
    padding: 0 15px;
    box-sizing: border-box;
    // 滚动条整体部分
    &::-webkit-scrollbar {
      width: 6px;
      height: 8px;
    }
    &::-webkit-scrollbar-button {
      display: none;
    }
    &::-webkit-scrollbar-thumb {
      background: #01c2ff;
      cursor: pointer;
      border-radius: 4px;
    }
    &::-webkit-scrollbar-corner {
      display: none;
    }
    &::-webkit-resizer {
      display: none;
    }

    .book-item {
      height: 40px;
      border-radius: 60px;
      background: #0a1a34;
      border: 1px solid #59aff9;
      box-shadow: inset 0px 0px 5px 0.5px rgba(3, 251, 255, 0.6513);
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
      position: relative;
      font-size: 16px;
      padding: 0 10px;
      box-sizing: border-box;
      .book-text {
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
        flex: 1;
      }

      .clear-icon {
        display: inline-block;
        width: 20px;
        height: 20px;
        background-image: url(/static/icon/删除@1x.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        cursor: pointer;
      }
      .clear-icon:hover {
        transform: rotate(360deg);
        transition: all 1s ease;
      }
    }
    .active {
      background: #1158ca;
    }
  }
}
</style>